<template>
  <div
    class="unit"
    style="padding: 24px; background: #ffffff; margin: 24px 16px 0"
  >
    <div class="">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="
          (title = '新增单位'), (form.unitstatus = 1), (dialogVisible = true)
        "
        >新增</el-button
      >
    </div>
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column prop="unitname" label="单位名称" align="center">
      </el-table-column>
      <el-table-column label="单位类别" align="center">
        <template slot-scope="{ row }">
          {{ getName(row.unittypeid,unitTypeList) }}
        </template>
      </el-table-column>
      <el-table-column label="单位党组织情况" align="center">
        <template slot-scope="{ row }">
          {{ getName(row.unitorgid,unitCaseList) }}
        </template>
      </el-table-column>
      <el-table-column prop="transmember" label="批量迁移党员" align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="row.unitstatus ? 'success' : 'danger'"
            >{{ row.unitstatus ? "可" : "不可" }}用</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <div class="" style="display: flex; justify-content: center">
            <el-button type="text" @click="handleItem(1, row)">编辑</el-button>
            <el-button type="text" @click="handleItem(2, row)"
              >{{ row.unitstatus ? "禁" : "启" }}用</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
		<pagination
			v-show="ruleForm.total > 0"
			:total="ruleForm.total"
			:page.sync="ruleForm.pageNum"
			:limit.sync="ruleForm.pageSize"
			@pagination="() => {}"
		/>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="740px" @close="cancelForm('form')">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        class="form"
        inline
      >
        <el-form-item label="单位名称" prop="unitname">
          <el-input
            v-model="form.unitname"
            placeholder="请输入单位名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位类别" prop="unittypeid">
          <el-select
            v-model="form.unittypeid"
            clearable
            placeholder="请选择单位类别"
          >
            <el-option
              v-for="item in unitTypeList"
              :key="item.id"
              :label="item.configname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位党组织情况" prop="unitorgid">
          <el-select
            v-model="form.unitorgid"
            clearable
            placeholder="请选择单位党组织情况"
          >
            <el-option
              v-for="item in unitCaseList"
              :key="item.id"
              :label="item.configname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批量迁移党员" prop="transmember">
          <el-input v-model="form.transmember"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="unitstatus">
          <el-select v-model="form.unitstatus" placeholder="请选择状态">
            <el-option label="可用" :value="1"></el-option>
            <el-option label="不可用" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelForm('form')">取 消</el-button>
        <el-button
          :disabled="btnLoading"
          type="primary"
          @click="submitForm('form')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getUnitList,
  addUnit,
  editUnit,
  deleteUnit,
  openUnit,
  getConfigList,
} from "@/api/setting/index";
export default {
  data() {
    return {
      title: "",
      btnLoading: false,
      loading: false,
      dialogVisible: false,
      list: [],
      ruleForm: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      rules: {
        unitname: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        unittypeid: [
          { required: true, message: "请选择单位类别", trigger: "change" },
        ],
        unitorgid: [
          {
            required: true,
            message: "请选择单位党组织情况",
            trigger: "change",
          },
        ],
      },
      form: {
        id: null,
        unitname: "",
        unittypeid: "",
        unitorgid: "",
        transmember: 1,
        unitstatus: 1,
      },
      unitTypeList: [], //单位类别
      unitCaseList: [], //单位建立党支部情况
    };
  },
  methods: {
    handleItem(type, item) {
      if (type == 1) {
        this.title = "编辑单位";
        let { id, unitname, unittypeid, unitorgid, transmember, unitstatus } =
          item;
        this.form = {
          id,
          unitname,
          unittypeid,
          unitorgid,
          transmember,
          unitstatus,
        };
        this.dialogVisible = true;
      } else {
        let api = item.unitstatus
          ? deleteUnit({ id: item.id })
          : openUnit({ id: item.id });
        api.then((res) => {
          this.$modal.msgSuccess(res.msg);
          this.getList();
        });
      }
    },
    //新增、编辑
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let api = this.form.id ? editUnit(this.form) : addUnit(this.form);
          api
            .then((res) => {
              this.btnLoading = false;
              this.dialogVisible = false;
              this.ruleForm.pageNum = 1;
              this.$modal.msgSuccess(res.msg);
              this.getList();
            })
            .catch(() => {
              this.btnLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    //切换分页
    handleCurrentChange(val) {
      this.loading = true;
      this.ruleForm.pageNum = val;
      this.getList();
    },
    //切换总条数
    handleSizeChange(val) {
      this.loading = true;
      this.ruleForm.pageSize = val;
      this.getList();
    },
    getList() {
      getUnitList(this.ruleForm).then((res) => {
        this.list = res.data.list;
        this.ruleForm.total = res.data.total;
        this.loading = false;
      });
    },
    //获取配置信息
    getConfigList() {
      getConfigList({ configflag: "danweileibie" }).then((res) => {
        this.unitTypeList = res.data;
      });
      getConfigList({ configflag: "danweijianlidangzuzhiqingkuang" }).then(
        (res) => {
          this.unitCaseList = res.data;
        }
      );
    },
  },
  created() {
    this.getList();
    this.getConfigList();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .form .el-form-item__content {
  width: 220px;
}
</style>
